<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>口袋租房</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/swiper.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/swiper.min.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="http://api.map.baidu.com/getscript?v=2.0&ak=pbmOo1GbhV3OpnvT06G4gla3hraVKTIz"></script>
	</head>

	<body>
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="maincontent" class="xf-detail">
			<div class="part1">
				<div class="content-area">
					<div class="nav">
						首页<span class="lab iconfont icon-jiantou_xiangyouliangci"></span>
						<span>口袋租房</span>
						<span class="lab iconfont icon-jiantou_xiangyouliangci"></span>
						<span>{{housedata.house_name}}</span>
					</div>
					<div class="title">{{housedata.house_name}}</div>
					<div class="flag items-display-flex flex-between flex-row">
						<div><span v-for="flag in housedata.marks">{{flag}}</span></div>
						<div class="contact-serivce" v-on:click="helpkefu">联系客服</div>
					</div>
				</div>
			</div>

			<div class="content-area">
				<div class="part2 items-display-flex flex-row flex-between">
					<div class="pics poz-relative">
						<div class="img-flag">
							效果图&nbsp;{{imgindex+1}}/{{housedata.images.length}}
						</div>

						<div class="swiper-container swiper-container3">
							<div class="swiper-wrapper">
								<div class="swiper-slide" v-for="(item,index) in housedata.images">
									<div class="item">
										<img v-bind:src="item" @click='showBigImg(item,index)' />
									</div>
								</div>
							</div>

							<div class="swiper-button-next next"><span class="iconfont icon-nvxingfuben1"></span></div>
							<div class="swiper-button-prev prev"><span class="iconfont icon-nvxingfuben"></span></div>
						</div>
					</div>
					<div class="items-display-flex flex-column flex-between intro">
						<div class="price">
							<span class="lab1" style="margin-left: 0;">{{housedata.house_unit_price}}</span><span class="lab2">元/月</span>
						</div>
						<div class="lab4">
							<div><span class="iconfont icon-weizhi"></span><label>{{housedata.parent_region}}&nbsp;{{housedata.region}}</label>{{housedata.address}}</div>
							<div>交通：{{housedata.traffic}}</div>
							<div>付款：{{housedata.payment}}&nbsp;（{{housedata.lease}}）)</div>
						</div>
						<div class="adv-banner">
							<img src="../img/adv.jpg" v-on:click="buycoupon()"/>
						</div>
					</div>
				</div>
				<div class="ads">
					<img src="../img/index/ads.jpg" />
				</div>
				<div class="part3">
					<div class="title">房型详情</div>
					<div class="types">
						<div v-if="index<typecansee" v-for="(house,index) in houseTypeImage" class="type items-display-flex flex-row flex-between">
							<div class="intro items-display-flex flex-row">
								<img v-bind:src="house.img_path" />
								<div class="lab">
									<div><strong>{{house.flag}}</strong> {{house.name}}</div>
									<div>{{house.house_type}}&nbsp;{{house.area}}m<sup>2</sup></div>
								</div>
							</div>
							<div class="price"><span>{{house.price}}</span>起</div>
						</div>
					</div>
					<div class="more-type" v-if="houseTypeImage.length > typecansee" v-on:click="dealAllHouseType(1)">
						查看全部{{houseTypeImage.length}}个户型
					</div>
					<div class="more-type" v-if="houseTypeImage.length == typecansee && houseTypeImage.length > 1" v-on:click="dealAllHouseType(0)">
						收起
					</div>
				</div>
				<div class="part3">
					<div class="title">公寓配置</div>
					<div class="configure">{{housedata.configure}}</div>
				</div>
				<div class="part3">
					<div class="title">楼盘周边</div>
					<div class="map items-display-flex flex-row">
						<div id="allmap" class="mapview"></div>
						<div class="business">
							<div class="sites items-display-flex flex-row flex-between">
								<div v-bind:class="[siteindex==1 ? 'lab1':'lab2']" v-on:click="changeSite(1,'公交')">公交</div>
								<div v-bind:class="[siteindex==2 ? 'lab1':'lab2']" v-on:click="changeSite(2,'地铁')">地铁</div>
								<div v-bind:class="[siteindex==3 ? 'lab1':'lab2']" v-on:click="changeSite(3,'学校')">学校</div>
								<div v-bind:class="[siteindex==4 ? 'lab1':'lab2']" v-on:click="changeSite(4,'餐饮')">餐饮</div>
								<div v-bind:class="[siteindex==5 ? 'lab1':'lab2']" v-on:click="changeSite(5,'医院')">医院</div>
								<div v-bind:class="[siteindex==6 ? 'lab1':'lab2']" v-on:click="changeSite(6,'银行')">银行</div>
								<div v-bind:class="[siteindex==7 ? 'lab1':'lab2']" v-on:click="changeSite(7,'购物')">购物</div>
							</div>
							<div class="sites-list">
								<div v-if='siteindex==1' class="list"><span class="iconfont icon-gongjiaoche"></span><label>公交</label></div>
								<div v-else-if='siteindex==2' class="list"><span class="iconfont icon-ditie"></span><label>地铁</label></div>
								<div v-else-if='siteindex==3' class="list"><span class="iconfont icon-xuexiaogaikuang"></span><label>学校</label></div>
								<div v-else-if='siteindex==4' class="list"><span class="iconfont icon-canyin"></span><label>餐饮</label></div>
								<div v-else-if='siteindex==5' class="list"><span class="iconfont icon-yiyuan"></span><label>医院</label></div>
								<div v-else-if='siteindex==6' class="list"><span class="iconfont icon-yinhang"></span><label>银行</label></div>
								<div v-else-if='siteindex==7' class="list"><span class="iconfont icon-xiazai50"></span><label>购物</label></div>
								
								<div v-for="item in sitedata" class="list items-display-flex flex-row flex-between" v-on:click="showAddr(item)">
									<div>{{item.title}}</div>
									<div>{{item.distance}}m</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="part3">
					<div class="title">楼盘推荐</div>
					<div class="content items-display-flex flex-row" style="justify-content: flex-start;">
						<div v-for="item in hdata2" class="item">
							<div class="poz-relative size">
								<img v-bind:src="item.img_path" />
								<div class="img-lab items-display-flex flex-row flex-between">
									<div class="img-lab no-padding" style="background: none;">
										<div class="lab-cont5"><span>{{item.house_unit_price}}元/月</span>起</div>
										<div class="special-bg-view">地址：{{item.address}}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="tips_panel" class="tips-panel">
			<div class="panel">
				<div class="content poz-relative">
					<button class="close-btn" onclick="TipsExit()"><span class="iconfont icon-close"></span></button>
					<div class="contentimg">
						<img id="msgpic" src="../img/demo/pic1.jpg" style="width: 100%;height:auto;"/>
					</div>
				</div>
			</div>
		</div>
		<div id="page_footer" class="page-footer"></div>
	</body>
	<script>
		var convertHouseId;
		$(document).ready(function() {
			loadHeaderAndFooter();
			loadData();
		});
		
		var maincnt = new Vue({
			el: '#maincontent',
			data: {
				imgindex: 0,
				housedata: {
					images: [],
					houseTypeImage: []
				},
				housetype: [],
				houseTypeImage:[],
				typecansee: 3,
				hdata2: [],
				siteindex: 0,
				sitedata: []
			},
			methods: {
				dealAllHouseType: function(flag) {
					if(flag == 1) {
						this.typecansee = this.houseTypeImage.length;
					} else {
						this.typecansee = 3;
					}
				},
				dealAllNewsType: function(flag) {
					if(flag == 1) {
						this.newscansee = this.news.length;
					} else {
						this.newscansee = 4;
					}
				},
				changeSite: function(flag, thing) {
					this.siteindex = flag;
					searchSthing(thing);
				},
				showBigImg:function(urls,index){
					//显示大图
					var ids = "himg"+index;
					
					$("#msgpic").attr("src",urls);
					$('#tips_panel').show();
				},
				showAddr: function(item) {
					var opts = {
						width: 200, // 信息窗口宽度
						height: 100, // 信息窗口高度
						fontSize: 14,
						title: item.codetitle, // 信息窗口标题
					}
					var infoWindow = new BMap.InfoWindow(item.address, opts);
					map.openInfoWindow(infoWindow, item.point);
				},
				buycoupon:function(){
					var uinfo = getUserInfo();
					if(!uinfo){
						showLogin();
					}
					else{
						window.open('../pages/buyTickets.html?cid=4&houseid='+convertHouseId);
					}
				},
				helpkefu:function(){
					window.open('https://kefu.easemob.com/webim/im.html?configId=666a1310-a661-4c09-b9e3-8bc1c87764f3');
				}
			}
		});
		var imgsSwp;

		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html');
			$('#page_menu').load('../template/mainmenu3.html', function() {
				changeMenu(4);
			});
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}
		

		function loadData() {
			var data = {
				"id": getQueryString('houseid')
			}
			convertHouseId=data.id;
			jQuery.get(publicUrl+'/v1/renting/get', data, function(res) {
				res = res.data.house;
				
				console.log(res);
				
				for(var i = 0; i < res.images.length; i++) {
					res.images[i] = LocalImgUrl + res.images[i]
				}
				for(var i = 0; i < res.houseTypeImage.length; i++) {
					res.houseTypeImage[i].flag = letterFlag[i]
					res.houseTypeImage[i].img_path = LocalImgUrl + res.houseTypeImage[i].img_path;
				}
				maincnt.housedata = res;
				maincnt.houseTypeImage = res.houseTypeImage;
				console.log('222');
				var timeid = setTimeout(function() {
					clearTimeout(timeid);
					imgsSwp = new Swiper('.swiper-container3', {
						navigation: {
							nextEl: '.swiper-button-next',
							prevEl: '.swiper-button-prev',
						}
					});
					imgsSwp.on('slideChangeTransitionEnd', function() {
						maincnt.imgindex = imgsSwp.activeIndex;
					});
				}, 200);
				
				maincnt.siteindex = 1;
				getUserLocation(maincnt.housedata.address);
				loadRecommemd(maincnt.housedata.region_id)
			});
		}
		var point;
		var map;

		function searchSthing(thing) {
			map = new BMap.Map("allmap", {
				enableMapClick: false
			});
			map.centerAndZoom(point, 20); //初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true);
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
			var local = new BMap.LocalSearch(map, {
				renderOptions: {
					map: map,
					panel: "results"
				},
				onSearchComplete: function(results) {
					if(local.getStatus() == BMAP_STATUS_SUCCESS) {
						// 百度地图成功返回，将每个周边信息储存到nearby_info里
						var datas = [];
						for(var i = 0; i < results.getCurrentNumPois(); i++) {
							var locate = results.getPoi(i);
							if(locate != null) {
								// 查询结果与房屋的距离
								var distance = parseFloat(map.getDistance(locate.point, point)).toFixed(1);
								var data = {
									distance: parseInt(distance),
									title: locate.title,
									codetitle: ('<span style="color:#cc5522;font-size:16px;font-weight:bold;">' + locate.title + '</span>'),
									point: locate.point,
									address: ('<span style="font-size:12px;color:#000000;">' + locate.address + '</span>')
								};
								datas.push(data);
							}
						}
						datas.sort(compare('distance'));
						maincnt.sitedata = datas;
					}
					else{
						maincnt.sitedata = [];
					}
				}
			});
			local.searchNearby(thing, point);

			var icon = new BMap.Icon('http://www.jubenxiong.com/games/kdhouse/img/addr.png', new BMap.Size(26, 32), {
				anchor: new BMap.Size(10, 30)
			});
			var offsetx = -0.5 * 14 * maincnt.housedata.house_name.length + 14;
			var label = new BMap.Label(maincnt.housedata.house_name, {
				offset: new BMap.Size(offsetx, 30)
			});
			label.setStyle({
				fontSize:'14px',
				fontFamily:'微软雅黑',
				background:'rgba(0,0,0,0.2)',
				padding:'5px',
				border:'none',
				borderRadius:'5px',
				fontWeight:'bold'
			});
			var mk = new BMap.Marker(point, {
				icon: icon
			});
			mk.setLabel(label);
			map.addOverlay(mk);
			map.panTo(point);
		}

		function loadRecommemd(region_id) {
			region_id = 105;
			var data = {
				region_id: region_id
			};
			jQuery.get(publicUrl+'/v1/renting/get-same-region-house', data, function(res) {
				var list = [];
				for(var i = 0; i < res.data.list.length; i++) {
					if(list.length >= 4) {
						break;
					}
					res.data.list[i].img_path = LocalImgUrl + res.data.list[i].img_path;
					res.data.list[i].house_unit_price = res.data.list[i].house_unit_price.split('-')[0];
					list.push(res.data.list[i]);
				}
				maincnt.hdata2 = list;
			});
		}
		function TipsExit(){
			$('#tips_panel').hide();
		}
		var letterFlag = {
			0: 'A',
			1: 'B',
			2: 'C',
			3: 'D',
			4: 'E',
			5: 'F',
			6: 'H',
			7: 'I',
			8: 'J'
		};
	</script>

</html>